<template>
  <div class="chat_function">

    <div class="chat_item">
      <van-row gutter="10">
        <van-col span="6"><span class="_item">检查建议</span></van-col>
        <van-col span="6"><span class="_item">药品建议</span></van-col>
        <van-col span="6"><span class="_item none_bor"></span></van-col>
        <van-col span="6"><span class="_item">结束对话</span></van-col>
      </van-row>
    </div>

    <div>
      <div class="chat_cell">
        <div class="chat_button">上传文件</div>
        <div class="chat_input"><input type="text" v-model.trim="msgToSend" placeholder="点这里输入" /></div>
        <div class="chat_icon"><van-icon name="add-o" @click="handleShow"/></div>
        <van-button type="primary" class="chat_bttom" @click="sendTextMsg">发送</van-button>
      </div>
      <div v-if="showMoreFun" class="chat_cell">
        <van-row gutter="10">
          <van-col span="8">常用语</van-col>
          <van-col span="8">联系医助</van-col>
          <van-col span="8">发照片</van-col>
        </van-row>
      </div>  
    </div>

  </div>
</template>

<script>
import util from '@/utils'
import config from '@/configs'
import pageUtil from '@/utils/page'

export default {
  name: 'chat-function',
  data () {
    return {
      msgToSend: '',
      showMoreFun: false,
      scene: 'team'
    }
  },
  props: {
    from: String,
    to: String,
    isRobot: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  mounted () { },
  methods: {
    handleShow () {
      this.showMoreFun = !this.showMoreFun
    },
    sendTextMsg () {
      if (/^\s*$/.test(this.msgToSend)) {
        return this.$toast('请不要输入空字符串')
      }
      if (this.msgToSend.length > 800) {
        return this.$toast('请不要超过800个字')
      }
      this.$store.dispatch('sendMsg', {
        type: 'text',
        scene: this.scene,
        to: '603923190',
        text: this.msgToSend
      })
      this.msgToSend = ''
    }
  }
}
</script>

<style lang="less">
.chat_function {
  background-color: #fff;
  overflow: hidden;
  .chat_item {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    overflow: hidden;
    ._item {
      color: #108ee9;
      border: 1px solid #108ee9;
      padding: 5px;
      border-radius: 2px;
    }
    .none_bor {
      border: none;
    }
  }
  .chat_footer {
    position: relative;
  }
 .chat_cell {
   overflow: hidden;
   padding: 10px;
  }
 .chat_button {
   float: left;
   padding: 5px 0;
   border: 1px solid #108ee9;
   margin-right: 5px;
   border-radius: 2px;
   color: #108ee9;
  }
 .chat_input {
   display: inline-block;
   width: 10rem;
   float: left;
   padding: 5px;
   border-radius: 2px;
   margin-right: 5px;
   border: 1px solid #ccc;
   input {
     width: 100%;
     border: none;
     background: transparent;
   }
 }
 .chat_icon {
   float: left;
   margin-right: 5px;
   line-height: 40px;
 }
 .chat_bttom {
   float: left;
   height: 40px;
   line-height: 40px;
 }
}
</style>